<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>网易云音乐</title>
	<link href="cloud.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" href="iconfont/iconfont.css">
	<link href="flexible/flexible.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="artTemplate-master/dist/template.js"></script>
	<script src="zepto.min.js"></script>
	<meta name="flexible" content="initial-dpr=2" /> 
	<script src="flexible/flexilbleReload.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<script type="text/javascript" src="cloud.js"></script>

</head>
<body>
    <div id="audio-url"></div>

	<div class="all clear-float">
	</div>


	<div class="nav clear-float">
			   <div class="nav-content clear-float">
			       <p style="width:0.75rem;float:left;color:#fff; font-size: 35px;font-weight: lighter;"><
					   </p>
			           <div class="nav-songname clear-float">
			            <span id="nav-transName"></span></br>
			            <span id="nav-artists-name"></span>
			           </div>
			           <div>
			             <i class="icon iconfont icon-fenxiang1" style="color:#fff;font-size:20px"></i>
			           </div>
			   </div>
    </div>

    <div class="img-control">
		
	</div>


	<div class="nav-function clear-float">
		<i class="icon iconfont icon-xihuan" style="font-size:26px;" ></i>
		<i class="icon iconfont icon-xiazai" style="font-size:30px;"></i>
		<i class="icon iconfont icon-momentmessage" style="font-size:20px;"></i>
		<i class="icon iconfont icon-sandian" style="font-size:30px;"></i>
	</div>



	<div class="song-time clear-float" style=" height:0.65rem;">
	    <span id="song-start-m" style="float:left;font-size: 12px;color: #fff;margin-left:0.25rem">00</span>
		<span id="song-start" style="float:left;font-size: 12px;color: #fff;margin-right:10px;">:00</span>
		<div class="song-bar-bottom" style="z-index:-2"></div>
		<div class="song-bar-bottom-runing" id="song_bar_d"></div>
		<span id="song-finish" style="float:left;font-size: 12px;color: #fff;margin-left:4%;">00:00</span>
		<span id="song-finish-m" style="float:left;font-size: 12px;color: #fff;"></span>
	</div>



	 <div class="song-bofang  clear-float">
     	<i class="icon iconfont icon-shuaxin" style="font-size:35px;float:left" ></i>
			<i class="icon iconfont icon-houtui" style="font-size:30px;margin-left:1.3rem"></i>
			<i class="icon iconfont icon-zanting1" id="control" style="font-size:35px;margin:0 1.0rem"></i>
			<i class="icon iconfont icon-qianjin" style="font-size:30px;"></i>
		<i class="icon iconfont icon-sanheng" style="font-size:30px;float:right"></i>
     </div>

     <div class="song-list" style="display:none;">
	          <div class="touming" style="width:100%;height:32%;opacity:1;">
	        </div>
     </div>
 
     <div class="song-message" style="display:none">
     	<div class="message-touming" style="width:100%;height:25%;opacity:1;"></div>
     	<div class="message-butouming clear-float" style="width:100%;background:#fff;opacity:0.9">
     	   <div class="message-song-name" style="line-height:40px;border-bottom:1px solid #a9a9a9">
     		  <span id="message-song-span" style="font-size:14px;margin:0.375rem;font-weight: lighter"></span>
     	   </div>

     	   <div class="message-list">
	     	   
     	   </div>
     	</div>
     </div>
   


    <script id="backgroud_all" type="text/html">
    	<img class="tupian" src="{{result.tracks[0].album.picUrl}}";>
    </script>


	<script id="control_img" type="text/html">
		<img id="need" src="img/needle-ip6.png" style="width:3.0rem;z-index:5;position:absolute;left: 42%;">
		<img class="changpian" src="img/disc-ip6.png" style="width:8.25rem;z-index:3;margin-top:2.4rem;">
		<img class="face-img" src="{{result.tracks[0].album.picUrl}}">
	</script>

   
   <script id="list_song" type="text/html">
             	 <div class="butouming">
				     	<div class="song-list-nav clear-float">
				     	  <div class="song-list-nav-span clear-float">
				     		<span >列表循环(10)</span>
				     		<span style="margin-left: 80px;" >收藏</span>
				     		<span style="float:right">清空</span>
				     	  </div>
				     	</div>

			     	<ul class="song-list-ul clear-float">
			     	  {{each result.tracks as value i}}
				     		<a class="huoqu-url" >
					     		<li >
						     		 <div class="neibu clear-float "  value="{{value.mp3Url}}" style="margin:0 0.25rem">
	                                     {{each value.transNames as value2 d}}
	                                        <span class="song-name" data-index="{{i}}">{{value2}}</span>
	                                     {{/each}}
	                                     {{each value.artists as value3 f}}
							     		    <span class="people-name">{{value3.name}}</span>
                                         {{/each}}
						     		  <span class="X" style="float:right">X</span>
						     		 </div>
					     		</li>
				     		</a>
			           {{/each}}
			     	</ul>
           	 	<div class="list-close" style="height: 1.4rem;text-align:center; line-height: 45px;">
				     		<a>关闭</a>
				</div>
		 	</div>
				    
   </script>


   <script  id="message_list" type="text/html">
   		<ul class="message-list-ul">
		     	   	  <a>
		     	   	    <li>
			     	   	     <i class="icon iconfont icon-xiazai" style="font-size:32px;"></i>
			     	   	    <div class="message-neirong" >
			     	   	       <span class="message-list-span">收藏到歌单</span>
		     	   	       </div>
		     	   	    </li>
		     	   	  </a>
		     	   	   <a>
		     	   	    <li>
			     	   	     <i class="icon iconfont icon-xiazai" style="font-size:32px;"></i>
			     	   	    <div class="message-neirong" >
			     	   	       <span class="message-list-span">相似推介</span>
		     	   	       </div>
		     	   	    </li>
		     	   	  </a>
		     	   	   <a>
		     	   	    <li>
			     	   	     <i class="icon iconfont icon-xiazai" style="font-size:32px;"></i>
			     	   	    <div class="message-neirong" >
			     	   	       <span class="message-list-span">歌手：{{result.tracks[2].artists[0].name}}</span>
		     	   	       </div>
		     	   	    </li>
		     	   	  </a>
		     	   	   <a>
		     	   	    <li>
			     	   	     <i class="icon iconfont icon-xiazai" style="font-size:32px;"></i>
			     	   	    <div class="message-neirong" >
			     	   	       <span class="message-list-span">专辑：{{result.tracks[2].album.name}}</span>
		     	   	       </div>
		     	   	    </li>
		     	   	  </a>
		     	   	   <a>
		     	   	    <li>
			     	   	     <i class="icon iconfont icon-xiazai" style="font-size:32px;"></i>
			     	   	    <div class="message-neirong" >
			     	   	       <span class="message-list-span">来源：歌单</span>
		     	   	       </div>
		     	   	    </li>
		     	   	  </a>
		     	   	   <a>
		     	   	    <li>
			     	   	     <i class="icon iconfont icon-xiazai" style="font-size:32px;"></i>
			     	   	    <div class="message-neirong" >
			     	   	       <span class="message-list-span">音质：128/kbit/s</span>
		     	   	       </div>
		     	   	    </li>
		     	   	  </a>
		     	   	   <a>
		     	   	    <li>
			     	   	     <i class="icon iconfont icon-xiazai" style="font-size:32px;"></i>
			     	   	    <div class="message-neirong" >
			     	   	       <span class="message-list-span">定时关闭</span>
		     	   	       </div>
		     	   	    </li>
		     	   	  </a>
		     	   	  <a>
		     	   	    <li>
			     	   	     <i class="icon iconfont icon-xiazai" style="font-size:32px;"></i>
			     	   	    <div class="message-neirong" >
			     	   	       <span class="message-list-span">彩铃</span>
		     	   	       </div>
		     	   	    </li>
		     	   	  </a>
		     	   	  <a>
		     	   	    <li>
			     	   	     <i class="icon iconfont icon-xiazai" style="font-size:32px;"></i>
			     	   	    <div class="message-neirong" >
			     	   	       <span class="message-list-span">查看</span>
		     	   	       </div>
		     	   	    </li>
		     	   	  </a>
		     	   	  <a>
		     	   	    <li>
			     	   	     <i class="icon iconfont icon-xiazai" style="font-size:32px;"></i>
			     	   	    <div class="message-neirong" >
			     	   	       <span class="message-list-span">打开驾驶模式</span>
		     	   	       </div>
		     	   	    </li>
		     	   	  </a>
	     	   	</ul>
   </script>
	      <audio  id="audio" ></audio>
</body>
</html